<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id ="app"></div>
		
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			//全局组件
			//第一个参数是组件的名字，第二个参数是组件的options
			
			/* 1.先给父组件中绑定自定义的属性
			   2.在子组件中使用props接收父组件传递的数据
			   3.可以在子组件中随意使用*/
			Vue.component('Parent',{
				data:function(){
					return {
						msg:"我是父组件的数据"
					}
				},
				template:`
					<p>我是一个父组件
						<Child :childData = 'msg'/>
					</p>
				`,
			});
			Vue.component('Child',{
				template:`
					<div>
						<p>我是一个子组件</p>
						<input type = 'text' v-model= 'childData'></input>
					</div>
				`,
				props:['childData'],
			});
			//局部入口组件的创建
			var App ={
				data:function(){
					return {
						
					}
				},
				methods:{
				},
				components:{
				},
				//template:"<div>我是入口组件</div>",
				template:`
					<div>
						<Parent/>
					</div>
				`,
			}
			var vm = new Vue({
				el:"#app",
				data:function(){
					return {
						
					}
				},
				//挂在子组件
				components:{
					App
				},
				//父组件直接可以使用(标签使用；必须闭合标签)
				template:"<App/>"
			})
		</script>
	</body>
</html>
